<template>
	<view class="detail">
		<view class="container">
			<view v-if="loadState">
				<u-skeleton rows="5" title loading></u-skeleton>
			</view>
			<view v-else>
				<view class="title">{{detailObj.title}}</view>
				<view class="userinfo">
					<view class="avatar">
						<image :src="detailObj.user_id[0].avatar_file ? detailObj.user_id[0].avatar_file.url : '../../static/images/user-default.jpg'" mode="aspectFill"></image>
					</view>
					<view class="text">
						<view class="name">{{detailObj.user_id[0].nickname || detailObj.user_id[0].username}}</view>
						<view class="small">
							<uni-dateformat :date="detailObj.publish_date" format="yyyy年MM月dd hh:mm:ss"></uni-dateformat>
							· 发布于{{detailObj.province}}
						</view>
					</view>
				</view>
				<view class="content">
					<u-parse :content="detailObj.content" :tagStyle="tagStyle"></u-parse>
				</view>
				<view class="like">
					<view class="btn" :class="{'active': detailObj.isLike}" @click="clickLike">
						<text class="iconfont icon-good-fill"></text>
						<text v-if="detailObj.like_count">{{detailObj.like_count}}</text>
					</view>
					<view class="users">
						<image src="../../static/images/user.jpg" mode="aspectFill" ></image>
					</view>
					<view class="text"><text class="num">{{detailObj.view_count}}</text>人看过</view>
				</view>
			</view>
		</view>

		<view class="comment">
			<view>
				<u-empty
					mode="comment"
					icon="https://cdn.uviewui.com/uview/empty/comment.png"
				>
				</u-empty>
			</view>

			<view class="content">
				<view class="item" v-for="item in 3">
					<comment-item></comment-item>
				</view>
			</view>
		</view>

		<comment-frame></comment-frame>
	</view>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app"
	import { reactive, ref } from "vue"
	
	const db = uniCloud.database()
	const utilsObj = uniCloud.importObject('utilsObj', {
		customUI: true
	})
	
	const artid = ref('')
	const loadState = ref(true)
	const detailObj = reactive({})
	const tagStyle = {
		p: 'line-height: 1.7em;font-size: 16px;padding-bottom: 10upx;',
		img: 'margin: 10upx 0;'
	}
	
	onLoad((e) => {
		if (!e.id) {
			errFun()
			return
		}
		artid.value = e.id
		getData()
		readUpdate()
	})
	// 错误的处理
	const errFun = () => {
		uni.showToast({
			title: '参数有误',
			icon: 'none'
		})
		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/index/index'
			})
		}, 800)
	}
	// 获取数据详情
	const getData = () => {
		const artTemp = db.collection('quanzi_article').where(`_id=='${artid.value}'`).getTemp()
		const userTemp = db.collection('uni-id-users').field('_id,username,nickname,avatar_file').getTemp()
		const likeTemp = db.collection('quanzi_like').where(`article_id=='${artid.value}' && user_id==$cloudEnv_uid`).getTemp()
		db.collection(artTemp, userTemp, likeTemp).get({
			getOne: true
		}).then(res => {
			if (!res.result.data) {
				errFun()
				return
			}
			let isLike = res.result.data._id.quanzi_like.length ? true : false
			res.result.data.isLike = isLike
			Object.assign(detailObj, res.result.data)
			loadState.value = false
			uni.setNavigationBarTitle({
				title: detailObj.title
			})
		}).catch(err => {
			errFun()
		})
	}
	// 修改阅读量
	const readUpdate = () => {
		utilsObj.operation('quanzi_article', 'view_count', artid.value, 1)
	}
	// 点赞
	const likeTime = ref(0)
	const clickLike = () => {
		let time = Date.now()
		if (time - likeTime.value < 2000) {
			uni.showToast({
				title: '操作太频繁，请稍后...',
				icon: 'none'
			})
			return
		}
		
		detailObj.isLike ? detailObj.like_count-- : detailObj.like_count++
		detailObj.isLike = !detailObj.isLike
		likeTime.value = time
		// 调用点赞方法
		likeFun()
	}
	// 点赞操作数据库
	const likeFun = async () => {
		let count = await db.collection('quanzi_like').where(`article_id=='${artid.value}' && user_id==$cloudEnv_uid`).count()
		if (count.result.total) {
			db.collection('quanzi_like').where(`article_id=='${artid.value}' && user_id==$cloudEnv_uid`).remove().then(res => {
				utilsObj.operation('quanzi_article', 'like_count', artid.value, -1)
			})
		} else {
			db.collection('quanzi_like').add({
				article_id: artid.value
			}).then(res => {
				utilsObj.operation('quanzi_article', 'like_count', artid.value, 1)
			})
		}
	}
</script>

<style lang="scss" scoped>
	.detail{
		background: #f8f8f8;
		min-height: calc(100vh - var(--window-top));
		.container{
			padding:30upx;
			background: #fff;
			.title{
				font-size: 46upx;
				color:#333;
				line-height: 1.4em;
				font-weight: 600;
			}
			.userinfo{
				padding:20upx 0 50upx;
				display: flex;
				align-items: center;
				.avatar{
					width: 60upx;
					height: 60upx;
					padding-right: 15upx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.text{
					font-size: 28upx;
					color:#555;
					.small{
						font-size: 20upx;
						color:#999;
					}
				}
			}
			.content{
				
			}
			.like{
				display: flex;
				flex-direction: column;
				align-items: center;
				padding:80upx 50upx 50upx;
				.btn{
					width: 260upx;
					height: 120upx;
					background: #e4e4e4;
					border-radius: 100upx;
					color:#fff;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					font-size: 28upx;
					.iconfont{
						font-size: 50upx;
					}
					&.active{
						background: #0199FE;
					}
				}
				.text{
					font-size: 26upx;
					color:#666;
					.num{
						color:#0199FE;
					}
					.spot{
						padding:0 10upx;
					}
				}
				.users{
					display: flex;
					justify-content: center;
					padding:30upx 0;
					image{
						width: 50upx;
						height: 50upx;
						border-radius: 50%;
						border:3px solid #fff;
						margin-left:-20upx;
					}
				}
			}
		}
		.comment{
			padding:30upx;
			padding-bottom:120upx;
			.item{
				padding:10upx 0;
			}
		}
	}
</style>
